import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact,
    scriptBox,
    vfnBox,
    fnBox,
    addEvtLis,
    addVEvtLis,
    userState,
    useEffect,
    returnFn,
    removeEvtLis
} from "../../../static/utils/codeHTML.js"
export const data = {
    key: "svg-reader",
    title: "Svg-Reader",
    titleText: ["Click on the title name area and drag the pop-up box。", "Customizable display of pop-up box content，Can also be used for displaying SVG 2D drawings。"],
    CODEList: [
        {
            title: 'Basic Usage',//标题
            introduction: "Visible controls pop-up display, ref listens to pop-up events",//简介
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Pop up button",
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '1.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>open</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>:visble</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>open</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"modelRef"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                    `<br />${textIndent(tagContent("h1", "", "测试"))}`
                )}
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                "open:false",
                `
                            ${addVEvtLis('modelRef', 'onOk', 'submit')}
                            <br />
                            ${addVEvtLis('modelRef', 'close', 'close')}
                        `,
                `
                            ${vfnBox('submit', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `, '')}
                            <br />
                            ${vfnBox('close', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="open=true">打开弹框</button>
                        <svg-reader :visble="open" ref="modelRef" titles="弹框标题">
                            <h1>测试</h1>
                        </svg-reader>
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            open: false
                        }
                    },
                    mounted() {
                        this.$refs.modelRef.addEventListener('onOk', this.submit.bind(this))
                        this.$refs.modelRef.addEventListener('close', this.close.bind(this))
                    },
                    methods: {
                        submit() {
                            this.open = false
                        },
                        close() {
                            this.open = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    modelRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('open', 'setOpen', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    modelRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('modelRef', 'onOk', 'submit')}
                            <br />
                            ${addEvtLis('modelRef', 'close', 'close')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('modelRef', 'onOk', 'submit')}
                        <br />
                        ${removeEvtLis('modelRef', 'close', 'close')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(`
                    ${fnBox("submit", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)}
                <br />
                ${fnBox("close", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)
                        }
                `)}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>visble</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>open</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>modelRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                            `<br />${textIndent(tagContent("h1", "", "测试"))}`
                        )}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                const modelRef = useRef<any>()
                const [open, setOpen] = useState<boolean>(false)
                useEffect(() => {
                    if (modelRef.current) {
                        modelRef.current?.addEventListener('onOk', submit)
                        modelRef.current?.addEventListener('close', close)
                    }
                    return () => {
                        modelRef.current?.removeEventListener('onOk', submit)
                        modelRef.current?.removeEventListener('close', close)
                    };
                });
                function submit() {
                    setOpen(false)
                }
                function close() {
                    setOpen(false)
                }
                return (
                    <>
                        <button onClick={() => setOpen(true)}>打开弹框</button>
                        <svg-reader visble={open} ref={modelRef} titles="弹框标题">
                            <h1>测试</h1>
                        </svg-reader>
                    </>
                )
                };
            `,
        },
        {
            title: 'Asynchronous shutdown',//标题
            introduction: "After clicking submit, asynchronously close the pop-up box, such as submitting a form。",
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Pop up button",
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '3.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>open</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                    <span class=code-attr-name>:confirmloading</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>loading</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>:visble</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>open</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"modelRef"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                    `<br />${textIndent(tagContent("h1", "", "测试"))}`
                )}
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                "loading:false,<br />open:false",
                `
                            ${addVEvtLis('modelRef', 'onOk', 'submit')}
                            <br />
                            ${addVEvtLis('modelRef', 'close', 'close')}
                        `,
                `
                            ${vfnBox('submit', `
                            <span class=code-this>this</span>.loading
                            =
                            true<br />
                            ${useEffect(textIndent(`
                            <span class=code-this>this</span>.loading
                            =
                            false<br />
                            <span class=code-this>this</span>.open
                            =
                            false<br />
                            `), "setTimeout", 3000)}
                            `, '')}
                            <br />
                            ${vfnBox('close', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="open=true">打开弹框</button>
                        <svg-reader :confirmloading="loading" :visble="open" ref="modelRef" titles="弹框标题">
                            <h1>测试</h1>
                        </svg-reader>
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            loading:false,
                            open: false
                        }
                    },
                    mounted() {
                        this.$refs.modelRef.addEventListener('onOk', this.submit.bind(this))
                        this.$refs.modelRef.addEventListener('close', this.close.bind(this))
                    },
                    methods: {
                        submit() {
                            this.loading = true
                            setTimeout(() => {
                                this.loading = false
                                this.open = false
                            },3000);
                        },
                        close() {
                            this.open = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    modelRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('open', 'setOpen', '&lt;boolean', 'false'))}
                ${textIndent(userState('loading', 'setLoading', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    modelRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('modelRef', 'onOk', 'submit')}
                            <br />
                            ${addEvtLis('modelRef', 'close', 'close')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('modelRef', 'onOk', 'submit')}
                        <br />
                        ${removeEvtLis('modelRef', 'close', 'close')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(`
                    ${fnBox("submit", "", `
                    <span class=code-keyword>setLoading</span><span class=code-punctuation>(</span>true<span class=code-punctuation>)</span><br />
                    ${useEffect(textIndent(`
                    <span class=code-keyword>setLoading</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span><br />
                            <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span><br />
                            `), "setTimeout", 3000)}
                    
                `)}
                <br />
                ${fnBox("close", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)
                        }
                `)}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                    <span class=code-attr-name>confirmloading</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>loading</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>visble</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>open</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>modelRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                            `<br />${textIndent(tagContent("h1", "", "测试"))}`
                        )}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                const modelRef = useRef<any>()
                const [open, setOpen] = useState<boolean>(false)
                const [ loading, setLoading ] = useState<boolean>(false)
                useEffect(() => {
                    if (modelRef.current) {
                        modelRef.current?.addEventListener('onOk', submit)
                        modelRef.current?.addEventListener('close', close)
                    }
                    return () => {
                        modelRef.current?.removeEventListener('onOk', submit)
                        modelRef.current?.removeEventListener('close', close)
                    };
                });
                function submit() {
                    setLoading(true)
                    setTimeout(() => {
                        setLoading(false)
                        setOpen(false)
                    },3000);
                }
                function close() {
                    setOpen(false)
                }
                return (
                    <>
                        <button onClick={() => setOpen(true)}>打开弹框</button>
                        <svg-reader confirmloading={loading} visble={open} ref={modelRef} titles="弹框标题">
                            <h1>测试</h1>
                        </svg-reader>
                    </>
                )
                };
            `,
        },
        {
            title: 'Customize Footer',//标题
            introduction: "Add the data slot footer attribute to the tag, and the tag element will overwrite the default footer",//简介
            imgs: [
                {
                    title: "Pop up button",
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '4.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>open</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>:visble</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>open</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"modelRef"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                    `<br />${textIndent(`
                        ${tagContent("h1", "", "测试")}<br />
                        ${tagContent("div", `
                        <span class=code-attr-name>data-slot-footer</span>`, `
                        <br />${textIndent(tagContent("button", `
                        <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>submit</span><span class=code-punctuation>"</span>
                        `, textIndent("自定义按钮")))}`)}
                    `)}`
                )}
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                "open:false",
                `
                            ${addVEvtLis('modelRef', 'close', 'close')}
                        `,
                `
                            ${vfnBox('submit', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `, '')}
                            <br />
                            ${vfnBox('close', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="open=true">打开弹框</button>
                        <svg-reader :visble="open" ref="modelRef" titles="弹框标题">
                            <h1>测试</h1>
                            <div data-slot-footer>
                                <button @click="submit">
                                    自定义按钮
                                </button>
                            </div>
                        </svg-reader>
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            open: false
                        }
                    },
                    mounted() {
                        this.$refs.modelRef.addEventListener('close', this.close.bind(this))
                    },
                    methods: {
                        submit() {
                            this.open = false
                        },
                        close() {
                            this.open = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    modelRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('open', 'setOpen', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    modelRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('modelRef', 'close', 'close')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('modelRef', 'close', 'close')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(`
                    ${fnBox("submit", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)}
                <br />
                ${fnBox("close", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)
                        }
                `)}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>visble</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>open</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>modelRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`,
                            `<br />${textIndent(`
                            ${tagContent("h1", "", "测试")}<br />
                            ${tagContent("div", `
                            <span class=code-attr-name>data-slot-footer</span>`, `
                            <br />${textIndent(tagContent("button", `
                            <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>submit</span><span class=code-punctuation>"</span>
                            `, textIndent("自定义按钮")))}`)}
                            `)}
                            `
                        )}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                    const modelRef = useRef<any>()
                    const [open, setOpen] = useState<boolean>(false)
                    useEffect(() => {
                        if (modelRef.current) {
                            modelRef.current?.addEventListener('close', close)
                        }
                        return () => {
                            modelRef.current?.removeEventListener('close', close)
                        };
                    });
                    function submit() {
                        setOpen(false)
                    }
                    function close() {
                        setOpen(false)
                    }
                    return (
                        <>
                            <button onClick={() => setOpen(true)}>打开弹框</button>
                            <svg-reader visble={open} ref={modelRef} titles="弹框标题">
                                <h1>测试</h1>
                                <div data-slot-footer>
                                    <button onClick={submit}>
                                        自定义按钮
                                    </button>
                                </div>
                            </svg-reader>
                        </>
                    )
                };
            `,
        },
        {
            title: 'SVG Preview',//标题
            introduction: "Pass in drawid and file, you can preview 2D drawings in the pop-up box, support zooming and dragging。",//简介
            attention: "Attention：The file needs to be sent to an SVG address that can be downloaded directly from the browser",//用法提示
            imgs: [
                {
                    title: "Pop up button",
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '5.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>open</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>:visble</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>open</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>:file</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>SVGPIC</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"modelRef"</span>
                        <span class=code-attr-name>centered</span><span class=code-punctuation>=</span><span class=code-punctuation>"true"</span>
                        <span class=code-attr-name>drawid</span><span class=code-punctuation>=</span><span class=code-punctuation>"1"</span>
                        <span class=code-attr-name>isfooterbtn</span><span class=code-punctuation>=</span><span class=code-punctuation>"false"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`)}
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                `
                SVGPIC: <span class=code-punctuation>'../../../public/test.svg'</span>,<br />
                open:false
                `,
                `
                            ${addVEvtLis('svgReader', 'close', 'close')}
                        `,
                `
                            ${vfnBox('close', `
                            <span class=code-this>this</span>.open
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="open=true">打开弹框</button>
                        <svg-reader ref="svgReader" drawid="1" :file="SVGPIC" isfooterbtn="false" titles="二维图纸" :visble="open" />
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            SVGPIC: '../../../public/test.svg',
                            open: false
                        }
                    },
                    mounted() {
                        this.$refs.svgReader.addEventListener('close', this.close.bind(this))
                    },
                    methods: {
                        close() {
                            this.open = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    modelRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span><br />
                    <span class=code-keyword>const</span>
                    SVGPIC
                    <span class=code-punctuation>=</span>
                    <span class=code-punctuation>'../../../public/test.svg'</span>
                `)}
                ${textIndent(userState('open', 'setOpen', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    modelRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('modelRef', 'close', 'close')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('modelRef', 'close', 'close')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(
                        fnBox("close", "", `
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `))}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "打开弹框")}
                    <br />
                    ${tagContent("svg-reader", `
                        <span class=code-attr-name>visble</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>open</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>file</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>SVGPIC</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>modelRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>drawid</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>1</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>isfooterbtn</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>false</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>centered</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>true</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>弹框标题</span><span class=code-punctuation>"</span>`)}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                    const svgReader = useRef<any>()
                    const SVGPIC = "../../../public/test.svg"
                    const [open, setOpen] = useState<boolean>(false)
                    useEffect(() => {
                        if (svgReader.current) {
                            svgReader.current?.addEventListener('close', close)
                        }
                        return () => {
                            svgReader.current?.removeEventListener('close', close)
                        };
                    });
                    function close() {
                        setOpen(false)
                    }
                    return (
                        <>
                            <button onClick={() => setOpen(true)}>打开弹框</button>
                            <user-selector isfooterbtn="false" centered="true" drawid="1" file={SVGPIC} visble={open} ref={svgReader} titles="弹框标题"></user-selector>
                        </>
                    )
                };
            `,
        }
    ],
    APIList: [
        {
            field: "titles",
            remark: "Pop up title",
            type: "string",
            default: ""
        },
        {
            field: "width",
            remark: "Bullet Frame width",
            type: "string",
            default: "600px"
        },
        {
            field: "height",
            remark: "Bullet Frame height",
            type: "string",
            default: "480px"
        },
        {
            field: "file",
            remark: "SVG Address",
            type: "string",
            default: ""
        },
        {
            field: "drawid",
            remark: "SVG drawid",
            type: "string",
            default: ""
        },
        {
            field: "highlightColor",
            remark: "Select SVG element highlight color",
            type: "string",
            default: "#f03"
        },
        {
            field: "highlightMode",
            remark: "Highlight mode, color: element color highlight, fill: fill color highlight, stroke: border highlight",
            type: "string[ ]",
            default: "[ ]"
        },
        {
            field: "gridlength",
            remark: "SVG grid line spacing",
            type: "number | string",
            default: "100"
        },
        {
            field: "maskclosable",
            remark: "Is the mask closed and enabled",
            type: "boolean",
            default: "false"
        },
        {
            field: "confirmloading",
            remark: "Footer default button loading",
            type: "boolean",
            default: "false"
        },
        {
            field: "confirmtext",
            remark: "Default submit button for footer text",
            type: "string",
            default: "提交"
        },
        {
            field: "canceltext",
            remark: "Footer default close button text",
            type: "string",
            default: "关闭"
        },
        {
            field: "centered",
            remark: "Is the pop-up displayed in the center",
            type: "boolean",
            default: "true"
        },
        {
            field: "isgrid",
            remark: "Does SVG require gridlines",
            type: "boolean",
            default: "true"
        },
        {
            field: "isfooterbtn",
            remark: "Do you need a default footer area",
            type: "boolean",
            default: "true"
        },
        {
            field: "visble",
            remark: "Pop up visualization control",
            type: "boolean",
            default: "false"
        },
    ],
    otherList: [//其他
        {
            title: "Slot",
            header: ["name", "explain"],
            list: [
                {
                    name: "——",
                    remark: "Content of SVG Reader",
                },
                {
                    name: "data-slot-footer",
                    remark: "The content of the svg reader button operation area",
                },
            ]
        },
        {
            title: "Event",
            titleText: ["We need to bind the element's ref and use addEventListener to listen for events。"],
            header: ["Event Name", "explain"],
            list: [
                {
                    name: "onOk",
                    remark: "SVG reader default submit button click event",
                },
                {
                    name: "close",
                    remark: "SVG reader shutdown event",
                },
            ]

        }
    ]
}